<template>
  <!-- 我审批过的 -->
  <el-main>
    <el-table :data="finishedTaskList" fit>
      <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
      <!-- 应该用不到 -->
      <!-- <el-table-column align="center" prop="taskId" label="任务编号" width="80"></el-table-column> -->
      <el-table-column align="center" prop="formflowName" label="流程名称"></el-table-column>
      <!-- <el-table-column align="center" prop="procDefVersion" label="流程版本" width="80">
        <template #default="{ row }">
          <el-tag type="primary">V{{ row.procDefVersion }}</el-tag>
        </template>
</el-table-column> -->
      <el-table-column align="center" prop="category" label="归属系统">
        <template #default="{ row }">
          {{ APP_LIST.find((item) => item.code === row.category)?.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="startUserName" label="流程发起人">
        <template #default="{ row }">
          {{ row.startUserName }}
          <el-tag type="primary">{{ row.startDeptName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column align="center" prop="duration" label="耗时" width="200"></el-table-column>
      <el-table-column align="center" label="流程状态" width="200">
        <template #default="{ row }">
          <el-tag :type="row.finishTime === null ? 'primary' : 'success'">{{ row.finishTime === null ? row.taskName :
            '已完成'
            }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column header-align="center" align="left" label="操作" width="200">
        <template #default="{ row }">
          <el-button :disabled="row.finishTime !== null" type="danger" link size="small"
            @click="revoke(row)">撤回</el-button>
          <el-button type="primary" link size="small" @click="show(row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.pageSize"
        layout="sizes,prev, pager, next, jumper" :total="pageInfo.total" :page-sizes="[10, 30, 50]"
        @change="changePage">
      </el-pagination>
    </div>
    <el-drawer title="流程信息" v-model="isProcessInstance" size="80%">
      <ProcessDetailPage :processStartFormData="processStartFormData" :flowData="flowData"
        :processInstance="processInstance">
      </ProcessDetailPage>
      <!-- <el-row>
        <el-col :span="12">
          <el-row style="display: flex; flex-direction: column;">
            <el-descriptions :column="1" size="default" title="发起流程信息">
              <el-descriptions-item v-for="(key, index) in Object.keys(processStartFormData)" :key="index"
                :label="key + '：'" label-align="right" label-class-name="description-label">{{
                  processStartFormData[key] }}</el-descriptions-item>
            </el-descriptions>
            <el-empty v-if="Object.keys(processStartFormData).length < 1" description="未查询到数据" :image-size="100" />
          </el-row>
          <el-row>
            <div><el-text tag="b" size="large" style="color: #303133">流程图</el-text></div>
            <BpmnViewer :flowData="flowData" :processInstance="processInstance"></BpmnViewer>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-text tag="b" size="large" style="color: #303133">审批流程信息</el-text>
          <el-timeline style="margin-top: 20px;">
            <el-timeline-item v-for="(activity, index) in processInstance.slice(0, -1)" :key="index" icon="MoreFilled"
              type="success" hide-timestamp>
              {{ activity.taskName }}
              <el-card shadow="hover" style="width: 80%;">
                <el-text>
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                  审批人员：{{ activity.assigneeName }}
                  <el-tag type="primary">
                    {{ activity.assigneeDeptName }}
                  </el-tag>
                </el-text><br>
                <el-text>
                  <el-icon>
                    <Comment :color="['1', '4', '5', 'comment'].includes(activity.comment?.type) ? '' : '#F8525E'" />
                  </el-icon>
                  {{ comment[activity.comment?.type] || "审批意见" }}：
                  {{ activity.comment?.comment }}</el-text><br>
                <el-text>
                  <el-icon>
                    <Stopwatch />
                  </el-icon>
                  消耗时长：{{ activity.duration }}</el-text><br>
                <el-text>
                  <el-icon>
                    <Timer />
                  </el-icon>
                  开始时间：{{ activity.createTime }}</el-text><br>
                <el-text>
                  <el-icon>
                    <Timer />
                  </el-icon>
                  结束时间：{{ activity.finishTime }}</el-text>
              </el-card>
            </el-timeline-item>
            <el-timeline-item v-for="(activity, index) in processInstance.slice(-1,)" :key="index" icon="SemiSelect"
              type="primary" hide-timestamp>
              {{ activity.taskName }}
              <el-card shadow="hover" style="width: 80%;">
                <el-text>
                  <el-icon>
                    <UserFilled />
                  </el-icon>
                  审请人员：{{ activity.assigneeName }}
                  <el-tag type="primary">
                    {{ activity.assigneeDeptName }}
                  </el-tag>
                </el-text><br>
                <el-text>
                  <el-icon>
                    <Timer />
                  </el-icon>
                  开始时间：{{ activity.createTime }}</el-text><br>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row> -->
    </el-drawer>
  </el-main>

</template>

<script setup>
import { ref } from 'vue'
import { getFinishedList } from '@/api/flowable/task.js'
import { APP_LIST } from '@/constants/appname.js'
import { getrecords, revokeTask } from '@/api/flowable/task'
import { getInstanceVariables } from '@/api/flowable/instance'
import { getProcessXmlAndNode } from '@/api/flowable/defination'
import ProcessDetailPage from '../components/ProcessDetailPage.vue'
// import { comment } from '@/constants/flowable.js'
// import BpmnViewer from '.././start/BpmnViewer.vue'
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const finishedTaskList = ref([])
const isProcessInstance = ref(false)
const processInstance = ref([])
const processStartFormData = ref({})
const flowData = ref('')
async function doGetFinishedList() {
  await getFinishedList(pageInfo.value).then(res => {
    console.log(res.data.data)
    pageInfo.value.total = res.data.data.total
    finishedTaskList.value = res.data.data.records
  })
}
doGetFinishedList()
function changePage(page) {
  pageInfo.value.page = page
  doGetFinishedList()
}
//撤回任务
async function revoke(row) {
  console.log(row)
  await revokeTask({ procInsId: row.procInsId }).then(res => {
    console.log(res)
  })
}
async function show(row) {
  processInstance.value = []
  processStartFormData.value = {}
  flowData.value = ''
  console.log(row)
  isProcessInstance.value = true
  await getrecords(row.procInsId).then(res => {
    console.log('processIntance', res)
    processInstance.value = res.data.data
  })
  await getInstanceVariables(row.procInsId).then(res => {
    console.log('variables', res)
    processStartFormData.value = res.data.data
  })
  await getProcessXmlAndNode(row.deployId, row.procInsId).then(res => {
    // console.log('xmlAndNode:', res.data.data)
    flowData.value = res.data.data
  })
}
</script>

<style lang="less" scoped>
:deep(.description-label) {
  color: var(--el-color-primary);
  margin-left: 16px;
  background: var(--el-color-success-light-9) !important;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  /* 居右对齐 */
}
</style>